<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center="true" :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:650px;overflow:auto">
           <div class="title">报修信息</div>
           <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="设备代码" prop="code">
                        <el-input v-model="detail.code" placeholder="设备代码" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设备名称" prop="title">
                        <el-input v-model="detail.title" placeholder="设备名称" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设备类别" prop="class_title">
                        <el-input v-model="detail.class_title" placeholder="设备类别" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="故障类别" prop="fault_title">
                        <el-input v-model="detail.fault_title" placeholder="故障类别" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急程度" prop="urgent_name">
                        <el-input v-model="detail.urgent_name" placeholder="紧急程度" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报修人" prop="maintenance_admin_name">
                        <el-input v-model="detail.maintenance_admin_name" placeholder="报修人" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="报修时间" prop="maintenance_create_time">
                        <el-date-picker v-model="detail.maintenance_create_time" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" disabled style="width:100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="故障描述" prop="remark">
                        <el-input v-model="detail.remark" placeholder="故障描述" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="响应人" prop="work_admin_name">
                        <el-input v-model="detail.work_admin_name" placeholder="响应人" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="响应时间" prop="work_create_time">
                        <el-date-picker v-model="detail.work_create_time" :value-format="'YYYY-MM-DD'"  style="width:100%" type="date" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="title">维修汇报信息</div>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="维修人" prop="user_name">
                        <el-input v-model="detail.user_name" placeholder="维修人" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="维修开始时间" prop="start_date">
                        <el-date-picker v-model="form.start_date" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" @change="timeChage" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="维修结束时间" prop="end_date">
                        <el-date-picker v-model="form.end_date" type="datetime" placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="协作人" prop="assist_id">
                        <el-select v-model="form.assist_id"  filterable style="width: 100%" placeholder="请选择协作人" clearable multiple>
                            <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="故障原因" prop="task_reason">
                        <el-input v-model="form.task_reason" placeholder="故障原因"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="维修内容" prop="task_handle">
                        <el-input v-model="form.task_handle" placeholder="维修内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="零部件信息" prop="task_img">
                        <el-select v-model="info"  filterable style="width: 100%" placeholder="请选择零部件" clearable multiple>
                            <el-option v-for="(item,index) in itemList" :key="index" :label="item.title" :value="item.title"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="备注" prop="task_remark">
                        <el-input v-model="form.task_remark" type="textarea" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="故障图片" prop="img">
                        <sc-upload v-model="detail.img" draggable disabled></sc-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="维修图片" prop="task_img">
                        <sc-upload v-model="form.task_img" draggable></sc-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col :span="24">
                <el-form-item label="备件领用信息" prop="info1">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="checkProduct">选择备件</el-button>
                    <sc-form-table ref="table" v-model="form.info1" :addTemplate="product" placeholder="暂无数据" height="350" hideAdd show-summary>
                        <el-table-column label="物料代码" align="center">
                            <template #default="scope">{{scope.row.goods_code}}</template>
                        </el-table-column>
                        <el-table-column label="物料名称" align="center">
                            <template #default="scope">{{scope.row.goods_name}}</template>
                        </el-table-column>
                        <el-table-column label="规格型号" align="center">
                            <template #default="scope">{{scope.row.goods_spec}}</template>
                        </el-table-column>
                        <el-table-column label="物料分类" align="center">
                            <template #default="scope">{{scope.row.cate_name}}</template>
                        </el-table-column>
                        <el-table-column label="计量单位" align="center">
                            <template #default="scope">{{scope.row.unit_name}}</template>
                        </el-table-column>
                        <el-table-column prop="number" label="领用数量" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.number" placeholder="领用数量"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" placeholder="备注"></el-input>
                            </template>
                        </el-table-column>
                    </sc-form-table>
                </el-form-item>
            </el-col>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
    <spare-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false" draggable></spare-list>
</template>

<script>
import spareList from '../../setting/spare/spareList.vue';
export default {
  components: { spareList },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增维修工单',
				edit: '维修汇报',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
            dialog: {
				save: false,
			},
			//表单数据
			form: {
				id: "",
				// flow_id: "",
				assist_id: "",
                task_reason:"",
                task_handle:"",
                task_img:"",
                task_remark:"",
                check_admin:"",
                start_date:"",
                end_date:"",
                remark:"",
                info:[],
                info1:[],
			},
            detail:{
                code:"",
                title:"",
                class_title:"",
                fault_title:"",
                urgent_name:"",
                user_neme:"",
                create_time:"",
                admin_name:"",
                user_name:"",
                work_admin_name:"",
                work_create_time:"",
                maintenance_admin_name:"",
                maintenance_create_time:"",
            },
            selection:[],
            itemList:[],
            flowList:[],//审批
            humList:[],//人员
            info:"",
		}
	},
	mounted() {
        // this.getFlow()
        this.getHum()
	},
	methods: {
        timeChage(e){
            console.log('e :>> ', e);
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            this.itemList.map(item=>{
                this.info.map(item1=>{
                    if(item.title==item1){
                        this.form.info.push(item)
                    }
                })
            })
            var currentDate = new Date(); // 获取当前时间
            var year = currentDate.getFullYear(); // 获取年份
            var month = currentDate.getMonth() + 1; // 获取月份，注意月份从0开始，所以要加1
            var day = currentDate.getDate(); // 获取日期
            var hour = currentDate.getHours(); // 获取小时
            var minute = currentDate.getMinutes(); // 获取分钟
            var second = currentDate.getSeconds(); // 获取秒钟
            var time = '';
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            minute = minute < 10 ? '0' + minute : minute;
            second = second < 10 ? '0' + second : second;
            time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
            this.form.end_date = time
            let uploadedStartDate = this.form.start_date;
            function formatDateTime(dateTimeString) { //接受参数,进行转换
                let dateObj = new Date(dateTimeString);
                let localTime = new Date(dateObj.getTime() + (dateObj.getTimezoneOffset() * 60000) + (8 * 60 * 60 * 1000));
                let year = localTime.getFullYear();
                let month = ('0' + (localTime.getMonth() + 1)).slice(-2);
                let day = ('0' + localTime.getDate()).slice(-2);
                let hours = ('0' + localTime.getHours()).slice(-2);
                let minutes = ('0' + localTime.getMinutes()).slice(-2);
                let seconds = ('0' + localTime.getSeconds()).slice(-2); // 获取秒数
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            this.form.start_date = formatDateTime(uploadedStartDate); // 时间参数
            // this.form.end_date = formatDateTime(uploadedEndDate); // 时间参数
            this.form.info = this.selection
            console.log('this.form :>> ', this.form);
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					res = await this.$API.device.deviceTask.add.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("汇报成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
            var res = await this.$API.device.deviceTask.detail.post({id:data.id});
            console.log(res);
            this.form.start_date = res.data.start_date
            this.form.end_date = res.data.end_date
            this.form.remark = res.data.remark
            if(res.data.assist_id){
                let a  = (res.data.assist_id).split(",")
                let b = []
                a.forEach(item => {
                    b.push(Number(item))
                });
                this.form.assist_id = b
            }
            this.form.task_reason = res.data.task_reason
            this.form.task_handle = res.data.task_handle
            this.form.task_img = res.data.task_img
            let array = []
            res.data.info&&res.data.info.map(item=>{
                array.push({
                    apply:item.apply,
                    code:item.code,
                    maker:item.maker,
                    num:item.num,
                    remark:item.remark,
                    spec:item.spec,
                    title:item.title,
                    child:item.child
                })
            })
            this.itemList = array
			this.form.id = data.id
            this.form.task_remark = res.data.task_remark
            this.detail.code = res.data.device_code
            this.detail.title = res.data.device_title
            this.detail.class_title = res.data.class_title
            this.detail.fault_title = res.data.fault_title
            this.detail.urgent_name = res.data.urgent_name
            this.detail.create_time = res.data.create_time
            this.detail.user_name = res.data.user_name
            this.detail.admin_name = res.data.admin_name
            this.detail.work_admin_name = res.data.work_admin_name
            this.detail.work_create_time = res.data.work_create_time
            this.detail.maintenance_admin_name = res.data.maintenance_admin_name
            this.detail.maintenance_create_time = res.data.maintenance_create_time
            this.detail.remark = res.data.remark
            this.detail.img = res.data.img
            this.form.info1 = res.data.info1?JSON.parse(res.data.info1):[]
		},
        // 审批
        // async getFlow(){
        //     var res = await this.$API.all.getFlow.get({is_page:0});
        //     this.flowList = res.data
        // },
        // 人员
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
        checkProduct(){
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("add");
            });
        },
        handleSuccess(data){
            let array = []
            data.map((item)=>{
                array.push({
                    id:item.id,
                    goods_code:item.goods_code,
                    goods_name:item.goods_name,
                    goods_spec:item.goods_spec,
                    cate_name:item.cate_name,
                    unit_name:item.unit_name,
                    number:"",
                    remark:"",
                })
            })
            let existingIds = this.form.info1.map(item => item.id);
            for(let i = array.length - 1; i >= 0; i--){
                if(existingIds.includes(array[i].id)){
                    array.splice(i, 1);
                }
            }
            this.form.info1 = [...this.form.info1,...array]
        },
	}
}
</script>

<style lang="scss">
    .title{
        margin: 0 20px 20px;
        color: #01a066;
    }
    .table{
    border: 1px solid #e6e6e6;
    width: 100%;
    margin-bottom: 10px;
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
        .addIcon,.addChildIcon{
            width: 5%;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            padding: 10px;
        }
        .name{
            width: 12.5%;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            padding: 10px;
        }
    }
    .body{
        .display{
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            border-bottom: 1px solid #e6e6e6;
            .dataIndex,.addChildIcon{
                width: 5%;
                border-left: 1px solid #e6e6e6;
                border-left: 1px solid #e6e6e6;
                padding: 10px;
                display: flex;
                justify-content: center;
            }
            .name{
                width: 12.5%;
                border-left: 1px solid #e6e6e6;
                border-right: 1px solid #e6e6e6;
                padding: 10px;
            }
        }
        .child{
            .display{
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                border-bottom: 1px solid #e6e6e6;
                .dataIndex,.addChildIcon{
                    width: 5%;
                    border-left: 1px solid #e6e6e6;
                    border-right: 1px solid #e6e6e6;
                    padding: 10px;
                    display: flex;
                    justify-content: center;
                }
                .name{
                    width: 12.5%;
                    border-left: 1px solid #e6e6e6;
                    border-right: 1px solid #e6e6e6;
                    padding: 10px;
                }
            }
        }
    }
}
</style>
